<template>
    <div class="app-download">
        <img class="logo" src="../assets/image/logo.png">
        <div class="logo-text">神行镖</div>
        <div class="slogan">
            <div class="title">找车配货高效平台</div>
            <div class="sub-title">实现一站式全程透明</div>
        </div>
        <div class="button-container">
            <AppButton :block="true" :icon="driverIcon" bg="#f80" @click="downloadApp('1')">我是司机</AppButton>
            <AppButton :block="true" :icon="neederIcon" bg="#157FBD" @click="downloadApp('2')">我是货主</AppButton>
        </div>
        <div class="mask" v-show="maskVisible" @click="maskVisible = false">
            <img src="../assets/image/wexin-tip.png">
        </div>
    </div>
</template>

<script>
    import AppButton from "../components/AppButton";
    const driverIcon = require('../assets/image/car.png');
    const neederIcon = require('../assets/image/huowu.png');
    export default {
        name: "AppDownload",
        components: {AppButton},
        data() {
            return {
                driverIcon,
                neederIcon,
                maskVisible: false
            };
        },
        methods: {
            downloadApp(type) {
                var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                if (ua.indexOf('micromessenger') >= 0) {
                    //在微信或在qq中打开，提示用户浏览器打开
                    // this.$messagebox.alert('请在浏览器中打开此页面');
                    this.maskVisible = true;
                } else {
                    // 跳转下载链接
                    if (type === '1') {
                        window.open(window.app_config.siji_download_link);
                    } else {
                        window.open(window.app_config.huozhu_download_link);
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .app-download {
        height: 100vh;
        overflow: auto;
        font-size: 16/3.75+vw;
        padding: 0 40/3.75+vw;
        background-image: url(../assets/image/download-bg.png);
        background-size: 100% 100%;
        text-align: center;
        .logo {
            width: 77/3.75+vw;
            height: 77/3.75+vw;
            margin-top: 72/3.75+vw;
        }
        .logo-text {
            margin-top: 14/3.75+vw;
            font-size: 25/3.75+vw;
            color: #f3981b;
        }
        .slogan {
            margin-top: 62/3.75+vw;
            .title {
                color: #fff;
                font-size: 30/3.75+vw;
            }
            .sub-title {
                display: inline-block;
                width: 238/3.75+vw;
                height: 30/3.75+vw;
                line-height: 30/3.75+vw;
                margin-top: 20/3.75+vw;
                font-size: 15/3.75+vw;
                color: #fff;
                background: url(../assets/image/slogn-bg.png);
                background-size: 238/3.75+vw 29/3.75+vw;
                background-repeat: no-repeat;
            }
        }
        .button-container {
            margin-top: 83/3.75+vw;
            width: 100%;
        }
        .mask {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,.6);
            text-align: center;
            img {
                width: 90vw;
                margin-top: 10/3.75+vw;
            }
        }
    }
</style>
